<template>
	<view class="container">
		<!-- 提醒 -->
		<view class="list" v-if="listData">
			<view class="list-item" v-for="(item,index) in listData" :key="item.id">
				<view class="time">{{item.created_time}}</view>
				<view class="msg">
					{{item.content}}
				</view>
			</view>
			<cu-empty tips="暂时没有数据~" v-if="listData && listData.length == 0"></cu-empty>
			<u-loadmore v-else :status="status" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: null,
				status: 'loadmore',
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.status = 'loading';
				this.$Net.get(this.$api.user_msg_list, {
					page: 1,
					limit: 10,
					type: 1
				}, 1).then(res => {
					console.log(res);
					this.listData = res.list;
					this.status = 'nomore';
				}).catch(() => {
					this.status = 'nomore';
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background: #F5F7F8;
		padding-top: 24rpx;

		.list {

			.list-item {
				width: 686rpx;
				margin-bottom: 40rpx;

				.msg {
					color: rgba(0, 0, 0, 0.80);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					padding: 32rpx 36rpx;
					border-radius: 16rpx;
					background: #FFF;
					margin-top: 24rpx;
				}

				.time {
					color: rgba(0, 0, 0, 0.40);
					text-align: center;
					font-family: "PingFang SC";
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}

	}
</style>